<!--
  扇形图pie                   zls-2022/09/29
      Attributes
          1、data            Y轴主题色及数据 [{ name: '火车', value: 20 }]
                  type： 图标类型(line、bar、effectScatter)
                  color：主题色
                  list： 数据列表
                  name： tooltip提示文字的名称
                  unit： tooltip提示文字的单位
          2、colors           颜色列表
          3、radius           控制扇形是实心还是中间有空隙(默认为['65%', '80%'])
          4、unit             单位(默认为'-')
          5、textColor        文本颜色(默认为'#777')
          6、legend           是否显示图例组件（默认为true）

      Demo==>
          // 注意：echartsBox类必须给定宽高！！！！
          <div class="echartsBox">
            <z-pieEcahrts id="reasonEcahrts" :data="echartsROp.list" :colors="echartsROp.colors"></z-pieEcahrts>
          </div>

          const echartsROp:any = reactive({
            list: [
              { name: '火车', value: 20 },
              { name: '飞机', value: 10 },
              { name: '客车', value: 30 },
              { name: '轮渡', value: 50 }
            ],
            colors: ['#ffb673', '#8ef1e2', '#71c9ff', '#badf00'],
          })
-->
<template>
  <div class="z-pieEcahrts">
    <z-echarts :id="$attrs.id" :options="echartsOptions.obj"></z-echarts>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, watch } from 'vue'
const props = defineProps({
  data: {
    type: Array as () => Array<any>,
    default: () => []
  },
  colors: {
    type: Array as () => Array<any>,
    default: () => []
  },
  radius: {
    type: Array as () => Array<any>,
    default: () => ['65%', '80%']
  },
  unit: {
    type: String,
    default: ''
  },
  textColor: {
    type: String,
    default: '#777'
  },
  legend: {
    type: Boolean,
    default: true
  }
})

watch(
  () => props,
  () => {
    loadEcharts()
  },
  { deep: true }
)

onMounted(() => {
  loadEcharts()
})

const echartsOptions: any = reactive({ obj: {} })
function loadEcharts() {
  let total = 0

  const seriesData = JSON.parse(JSON.stringify(props.data))
  seriesData.forEach((v: any, i: number) => {
    v.itemStyle = { borderWidth: 10, shadowBlur: 20, borderColor: props.colors[i], shadowColor: props.colors[i] } // 设置圆圈样式
    total += v.value
  })

  echartsOptions.obj = {
    backgroundColor: 'transparent',
    color: props.colors,
    title: {
      show: !(props.radius[0] === 0 || props.radius[0] === '0%' || props.radius[0] === '0'),
      text: props.unit ? `${total} \n 总数(${props.unit})` : `${total} \n 总数`,
      left: 'center',
      top: 'center',
      textStyle: {
        color: props.textColor,
        fontSize: 24,
        fontWeight: '400'
      }
    },
    legend: {
      show: !!props.legend,
      icon: 'line',
      orient: 'horizontal',
      data: seriesData.length && seriesData.map((v: any) => v.name),
      alin: 'center',
      bottom: -5,
      itemGap: 15
    },
    tooltip: {
      borderColor: 'transparent',
      borderWidth: 1,
      backgroundColor: 'rgba(0,0,0,.6)',
      padding: 10,
      textStyle: { color: '#fff' },
      formatter: function (params: any) {
        const html = `<div style="display: flex; flex-direction: column;font-size: 14px;">
                      <span style="font-size: 18px;margin-bottom:10px">${params.name}</span>
                      <span>数值：${params.value}${props.unit}</span>
                      <span>占比：${params.percent}%</span>
                    </div>`
        return html
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: props.radius,
        label: {
          position: 'outside',
          color: props.textColor,
          formatter: function (params: any) {
            let total = 0
            seriesData.forEach((v: any) => (total += v.value))
            if (params.name !== '') {
              return `${params.name}\n${params.value}${props.unit}`
            }
            return ''
          }
        },
        labelLine: { show: true, length: 15 },
        data: seriesData
      }
    ]
  }
}
</script>
<script lang="ts">
export default { name: 'z-pieEcahrts' }
</script>

<style lang="scss" scoped>
.z-pieEcahrts {
  width: 100%;
  height: 100%;
}
</style>
